import { withI18n, Trans } from '@lingui/react'
import { Input, Select } from 'antd'
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'

const { Search } = Input
const InputGroup = Input.Group

const Option = Select.Option

@withI18n()
class Filter extends PureComponent {
  state = {
    filtertype: 'DeviceName',
    value: '',
    onlinevalue: '',
  }
  componentWillReceiveProps(nextprops) {
    if (nextprops.query && nextprops.query.filter) {
      const { filter } = nextprops.query
      const filterobj = JSON.parse(filter)
      let isonline = filterobj.name == 'Online'
      this.setState({
        filtertype: filterobj.name ? filterobj.name : 'DeviceName',
        value: isonline ? '' : filterobj.value,
        onlinevalue: isonline ? filterobj.value : '',
      })
    }
  }
  render() {
    const { i18n, onSearch } = this.props
    const { value, filtertype, onlinevalue } = this.state
    const selects = [
      {
        value: 'DeviceName',
        text: i18n.t`DeviceName`,
      },
      {
        value: 'Online',
        text: i18n.t`Online`,
      },
      {
        value: 'objectId',
        text: i18n.t`Device ID`,
      },
      {
        value: 'Imei',
        text: i18n.t`Device IMEI`,
      },
    ]
    const handleselect = item => {
      this.setState({
        filtertype: item,
      })
    }
    const handlesearch = str => {
      onSearch({
        filter: JSON.stringify({
          name: filtertype,
          value,
        }),
      })
    }
    const handlesearch2 = tvalue => {
      this.setState({
        onlinevalue: tvalue,
      })
      onSearch({
        filter: JSON.stringify({
          name: filtertype,
          value: tvalue,
        }),
      })
    }
    return (
      // <InputGroup style={{ width: "100%" }}>
      // <Row gutter={24} >
      <InputGroup compact>
        {filtertype != 'Online' && (
          <Search
            enterButton
            value={value}
            onSearch={handlesearch}
            // clearIcon={<Icon type="plus"></Icon>}
            // allowClear={true}
            onChange={e => {
              const { value } = e.target
              this.setState({ value })
            }}
            // style={{ width: '60%' }}
            addonBefore={
              <Select
                value={filtertype}
                defaultValue="DeviceName"
                onSelect={handleselect}
              >
                {selects.map(item => (
                  <Option value={item.value}>{item.text}</Option>
                ))}
              </Select>
            }
            placeholder={i18n.t`Search`}
          />
        )}
        {filtertype == 'Online' && (
          <Select
            value={filtertype}
            defaultValue="DeviceName"
            onSelect={handleselect}
          >
            {selects.map(item => (
              <Option value={item.value}>{item.text}</Option>
            ))}
          </Select>
        )}
        {filtertype == 'Online' && (
          <Select
            value={onlinevalue}
            onSelect={value => {
              handlesearch2(value)
            }}
          >
            <Option value="">
              <Trans>No choice</Trans>
            </Option>
            <Option value="1">
              <Trans>On-line</Trans>
            </Option>
            <Option value="0">
              <Trans>Off-line</Trans>
            </Option>
          </Select>
        )}
      </InputGroup>
    )
  }
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Filter
